<html xmlns="http://www.w3.org/1999/xhtml" 
	xmlns:h="http://java.sun.com/jsf/html" 
	xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:c="http://java.sun.com/jsp/jstl/core">

<h:head>
	<title>Worker</title>
	<script src="/TrabalhoAC2/js/jquery-1.9.1.js" type="text/javascript"></script>
	<script>
		var worker = new Worker("/TrabalhoAC2/js/worker.js");
		request("0");
		worker.onmessage = function(e) {
			request(e.data);
		};
		var henr;
		var fer;
		function request(resultado) {
			$.ajax({
				url :  '/TrabalhoAC2/Servlet',
				data : "resultado=" + JSON.stringify(resultado),
				type : 'POST',
				dataType : 'json',
				cache : false,
				error : function(e) {
					console.log("Sem atividades.");
					setTimeout(function(){
						request("0");
					},5000);
				},
				success : function(e) {
					if(e != 0){
						worker.postMessage(e);
						processado(e);
					}else{
						setTimeout(function(){
							request("0");
						},5000);
					}
				}
			});
		}
		function processado(e){
			$(".processando").fadeIn();
			var cont = parseInt($(".exibeProcessamento span").html());
			cont++;
			$(".exibeProcessamento").html('<span>'+ cont + '</span>');	
		}
		setInterval(function(){
			$.ajax({
				url : '/TrabalhoAC2/Servlet',
				data : 'tipo=estatistica',
				type : 'GET',
				dataType : 'json',
				cache : false,
				error : function(e) {
					console.log('error' + e);
				},
				success : function(e) {
					var processado = parseInt(e[2]);
					var total = parseInt(e[4]);
					var percent = (100*processado)/total;
					$('.percent span').html(percent.toFixed(0)+'%');
					$('.quantProcessada').css('width', percent + '%');
					$('#status').html(e[3]);
				}
			});
		},1000);
	</script>

	<link type="text/css" rel="stylesheet" href="#{request.contextPath}/css/workers.css"></link>
</h:head>
<h:body>
	<div id="siteLink" style="display:none">#{request.scheme}://#{request.serverName}:#{request.serverPort}#{request.contextPath}</div>
	<div class="wrap">
		<div class="header">
			<div class="background"></div>
			<div class="titulo">
				Processamento distribuído com WebWorkers
			</div>
		</div>
		
		<div class="container containerHome">
			<div class="descricao">
				Acessando esta página você está ajudando a fazer multiplicação de matrizez.
				 Cada item de dado é composto por uma linha de uma matriz e uma coluna de outra matriz. 
			</div>
		
			<div class="labelProcessando">
				Quantidade de itens que você processou:
			</div>
			<br/>
			<div class="exibeProcessamento">
				<span>0</span>
			</div>
			<br/>
			<br/>
			<div class="labelProcessando">
				Porcentagem da matriz processada:
			</div>
			<br/>
			<div id="status">
				Parado
			</div>
			<br/>
			<div class="percent">
				<span>0</span>
			</div>
			<br/>
			<div class="baraProcessamento">
				<div class="quantProcessada"></div>	
			</div>
			
			<div class="push"/>
		</div>
		
	</div>
	<div class="footer">
	</div>
</h:body>
</html>
